<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传与对比 - 美化版</title>
    <!-- 引入一个漂亮的字体 (可选, 来自 Google Fonts) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">

    <style>
        /* --- 基本重置和全局样式 --- */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Poppins', sans-serif; /* 应用漂亮字体 */
            background-color: #f4f7f6; /* 柔和的背景色 */
            color: #333;
            line-height: 1.6;
            display: flex; /* 使用 flex 布局使内容居中 */
            justify-content: center;
            align-items: flex-start; /* 从顶部开始对齐 */
            min-height: 100vh;
            padding: 40px 20px; /* 在body上加padding */
        }

        /* --- 主容器样式 --- */
        #upload-container {
            background-color: #ffffff; /* 白色背景 */
            padding: 30px 40px;
            border-radius: 12px; /* 更圆滑的边角 */
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* 更明显的阴影 */
            width: 100%;
            max-width: 900px; /* 增加最大宽度以容纳并排图片 */
            transition: all 0.3s ease; /* 平滑过渡效果 */
        }

        /* --- 标题 --- */
        h2 {
            text-align: center;
            color: #2c3e50; /* 深蓝灰色 */
            margin-bottom: 30px;
            font-weight: 600;
        }

        /* --- 文件选择区域 --- */
        .file-input-wrapper {
            margin-bottom: 25px;
            position: relative;
            display: flex; /* 让标签和文件名并排 */
            align-items: center;
            gap: 15px;
        }

        /* 隐藏原始文件输入框 */
        #photoInput {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }

        /* 自定义文件选择按钮 */
        .file-input-label {
            display: inline-block;
            padding: 10px 20px;
            background-color: #3498db; /* 主题蓝色 */
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: background-color 0.3s ease, transform 0.2s ease;
            white-space: nowrap; /* 防止按钮文字换行 */
        }

        .file-input-label:hover {
            background-color: #2980b9; /* 悬停时深一点的蓝色 */
            transform: translateY(-2px); /* 轻微上移效果 */
        }

        .file-input-label:active {
            transform: translateY(0); /* 点击时恢复 */
        }

        /* 显示选择的文件名 */
        #fileNameDisplay {
            font-size: 0.9em;
            color: #555;
            background-color: #ecf0f1; /* 浅灰色背景 */
            padding: 8px 12px;
            border-radius: 4px;
            flex-grow: 1; /* 占据剩余空间 */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-height: 38px; /* 与按钮高度大致对齐 */
            line-height: 22px; /* 垂直居中文本 */
            border: 1px solid #ddd;
        }

        /* --- 上传按钮 --- */
        #uploadButton {
            padding: 12px 25px;
            cursor: pointer;
            background-color: #2ecc71; /* 绿色表示动作 */
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 500;
            font-size: 1em;
            transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
            margin-right: 10px; /* 与原始代码保持一致 */
        }

        #uploadButton:hover:not(:disabled) {
            background-color: #27ae60; /* 悬停时深一点的绿色 */
            transform: translateY(-2px);
        }
        #uploadButton:active:not(:disabled) {
            transform: translateY(0);
        }

        #uploadButton:disabled {
            background-color: #bdc3c7; /* 禁用时灰色 */
            cursor: not-allowed;
            opacity: 0.7;
        }

        /* --- 状态消息 --- */
        #status {
            margin-top: 20px;
            padding: 12px 15px;
            border-radius: 6px;
            font-style: normal; /* 取消斜体，除非特定状态需要 */
            font-weight: 500;
            min-height: 1.5em; /* 保持最小高度 */
            background-color: #ecf0f1; /* 默认背景 */
            color: #34495e; /* 默认文字颜色 */
            transition: all 0.3s ease;
            text-align: center;
        }

        #status.info {
            background-color: #eaf2fa; /* 浅蓝色背景 */
            color: #3498db; /* 蓝色文字 */
            border-left: 4px solid #3498db;
        }

        #status.success {
            background-color: #eafaf1; /* 浅绿色背景 */
            color: #2ecc71; /* 绿色文字 */
            border-left: 4px solid #2ecc71;
        }

        #status.error {
            background-color: #fbecea; /* 浅红色背景 */
            color: #e74c3c; /* 红色文字 */
            border-left: 4px solid #e74c3c;
            font-weight: 600;
        }

        /* --- 图片对比容器 --- */
        #comparisonContainer {
            display: none; /* 初始隐藏，由 JS 控制 */
            gap: 30px; /* 增加图片间距 */
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #eee; /* 添加分隔线 */
            flex-wrap: wrap; /* 允许换行 */
        }

        .image-box {
            border: 1px solid #e0e0e0; /* 稍微清晰的边框 */
            padding: 15px;
            border-radius: 8px; /* 图片容器也加圆角 */
            flex: 1; /* 平分空间 */
            min-width: 250px; /* 调整最小宽度 */
            text-align: center;
            background-color: #fdfdfd; /* 非常浅的背景 */
            display: flex; /* 使用 flex 布局内部元素 */
            flex-direction: column; /* 垂直排列标题和图片 */
            transition: box-shadow 0.3s ease;
        }
        .image-box:hover {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* 悬停时轻微阴影 */
        }

        .image-box h4 {
            margin-top: 0;
            margin-bottom: 15px;
            color: #34495e; /* 标题颜色 */
            font-weight: 500;
            font-size: 1.1em;
        }

        .image-box img {
            max-width: 100%;
            height: 300px; /* 固定高度 */
            display: block;
            margin: 0 auto 10px auto; /* 底部留点空间 */
            object-fit: contain; /* 保持图片比例 */
            background-color: #f0f0f0; /* 图片占位符背景 */
            border-radius: 6px; /* 图片也加圆角 */
            min-height: 100px; /* 确保有个最小高度 */
            /* 添加占位符样式 */
            display: flex;
            align-items: center;
            justify-content: center;
            color: #aaa;
            font-size: 0.9em;
        }
        /* 当图片成功加载时，移除占位符背景和文字 */
        .image-box img[src]:not([src=""]) {
            background-color: transparent;
            color: transparent;
        }
        /* 使用伪元素显示占位符文本 */
        .image-box img:not([src]):not([src=""])::before,
        .image-box img[src=""]::before {
            content: attr(alt); /* 显示alt文本作为占位符 */
            display: block;
            color: #aaa;
            font-size: 0.9em;
        }
        .image-box img[src]:not([src=""]) {
            background-color: transparent; /* 有图时背景透明 */
        }
        .image-box img:-moz-loading::before { content: "加载中..."; } /* Firefox loading state */
        .image-box img:not(:complete):not([src=""])::before { content: "加载中..."; } /* Other browsers might need this */


        /* --- 响应式设计 --- */
        @media (max-width: 768px) {
            #upload-container {
                padding: 20px;
            }
            #comparisonContainer {
                flex-direction: column; /* 在小屏幕上堆叠图片 */
                gap: 20px;
            }
            .image-box {
                min-width: 100%; /* 图片框占满宽度 */
            }
            .file-input-wrapper {
                flex-direction: column; /* 文件选择按钮和文件名也堆叠 */
                align-items: stretch; /* 拉伸对齐 */
                gap: 10px;
            }
            #fileNameDisplay {
                text-align: center;
            }
        }
        @media (max-width: 480px) {
            body {
                padding: 20px 10px;
            }
            h2 {
                font-size: 1.5em;
                margin-bottom: 20px;
            }
            #uploadButton {
                width: 100%; /* 上传按钮占满宽度 */
                margin-right: 0;
                margin-top: 10px; /* 和文件选择按钮隔开 */
            }
        }

    </style>
</head>
<body>

<div id="upload-container">
    <h2>✨ HBB照片水印站 ✨</h2>

    <!-- 文件选择区域 -->
    <div class="file-input-wrapper">
        <label for="photoInput" class="file-input-label">选择图片</label>
        <input type="file" id="photoInput" name="photo" accept="image/*">
        <!-- 用于显示选择的文件名 -->
        <span id="fileNameDisplay">未选择任何文件</span>
    </div>

    <!-- 上传按钮和状态显示行 -->
    <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 15px;">
        <button id="uploadButton" disabled>上传至云端</button>
        <!-- 状态消息现在移到按钮旁边可能更好？或者保持在下面。保持原位 -->
    </div>
    <div id="status">请选择一张图片文件。</div>


    <!-- 图片对比容器 -->
    <div id="comparisonContainer">
        <!-- 本地预览区域 -->
        <div class="image-box" id="localPreviewContainer">
            <h4>本地预览</h4>
            <img id="localPreviewImage" src="" alt="本地预览图">
        </div>
        <!-- 服务器图片区域 -->
        <div class="image-box" id="serverImageContainer">
            <h4>云端版本</h4>
            <img id="serverImage" src="" alt="云端图片">
        </div>
    </div>
</div>

<script>
    const photoInput = document.getElementById('photoInput');
    const uploadButton = document.getElementById('uploadButton');
    const statusDiv = document.getElementById('status');
    const comparisonContainer = document.getElementById('comparisonContainer');
    const localPreviewContainer = document.getElementById('localPreviewContainer');
    const serverImageContainer = document.getElementById('serverImageContainer');
    const localPreviewImage = document.getElementById('localPreviewImage');
    const serverImage = document.getElementById('serverImage');
    // 新增：获取文件名显示元素
    const fileNameDisplay = document.getElementById('fileNameDisplay');

    let selectedFile = null;

    // --- 文件选择事件处理 ---
    photoInput.addEventListener('change', (event) => {
        const files = event.target.files;

        // 重置状态
        comparisonContainer.style.display = 'none'; // 隐藏对比区
        localPreviewImage.src = ''; // 清空本地预览图
        serverImage.src = '';     // 清空服务器图
        serverImage.removeAttribute('style'); // 移除可能存在的内联样式
        localPreviewImage.removeAttribute('style'); // 移除可能存在的内联样式
        fileNameDisplay.textContent = '未选择任何文件'; // 重置文件名显示
        statusDiv.textContent = '请选择一张图片文件。'; // 重置状态消息
        statusDiv.className = ''; // 清除状态样式
        uploadButton.disabled = true; // 禁用上传按钮

        if (files && files.length > 0) {
            selectedFile = files[0];

            if (!selectedFile.type.startsWith('image/')) {
                statusDiv.textContent = '错误：请选择图片文件！';
                statusDiv.className = 'error';
                selectedFile = null;
                // 不需要再次禁用按钮，上面已禁用
                // 清空input的值，以便用户可以重新选择相同的文件
                photoInput.value = null;
                return;
            }

            // 更新文件名显示
            fileNameDisplay.textContent = selectedFile.name;

            statusDiv.textContent = `已选择文件: ${selectedFile.name}. 正在生成本地预览...`;
            statusDiv.className = 'info';
            // 此时还不能启用上传按钮，等预览加载完成

            const reader = new FileReader();
            reader.onload = function(e) {
                localPreviewImage.src = e.target.result;
                comparisonContainer.style.display = 'flex'; // 显示对比容器
                serverImage.src = ''; // 确保服务器区域是空的占位符状态
                statusDiv.textContent = `本地预览已生成。可以上传了。`;
                statusDiv.className = ''; // 清除info状态，或设为默认提示
                uploadButton.disabled = false; // **预览成功后才启用上传按钮**
            }
            reader.onerror = function(e) {
                console.error("FileReader Error:", e);
                statusDiv.textContent = '读取文件预览失败！请尝试其他图片。';
                statusDiv.className = 'error';
                selectedFile = null;
                uploadButton.disabled = true;
                comparisonContainer.style.display = 'none';
                fileNameDisplay.textContent = '读取失败';
                photoInput.value = null; // 清空以便重选
            }
            reader.readAsDataURL(selectedFile);

        } else {
            // 用户可能取消了文件选择
            selectedFile = null;
            // 状态已在开始时重置
        }
    });

    // --- 上传按钮点击事件处理 ---
    uploadButton.addEventListener('click', async () => {
        if (!selectedFile) {
            statusDiv.textContent = '错误：没有选择文件！';
            statusDiv.className = 'error';
            return;
        }

        statusDiv.textContent = '⏳ 正在上传图片至服务器...';
        statusDiv.className = 'info';
        uploadButton.disabled = true; // 禁用按钮防止重复点击
        uploadButton.textContent = '上传中...'; // 改变按钮文字提示
        serverImage.src = ''; // 清空旧的服务器图片，显示占位符/加载状态

        const formData = new FormData();
        formData.append('file', selectedFile); // 'file' 应与服务器端接收的字段名匹配

        try {
            // --- 模拟延迟和不同结果 ---
            // const responsePromise = new Promise((resolve, reject) => {
            //     setTimeout(() => {
            //         // 随机成功或失败
            //         if (Math.random() > 0.3) {
            //             resolve({
            //                 ok: true,
            //                 status: 200,
            //                 json: async () => ({
            //                     code: 1,
            //                     // 使用一个在线图片URL作为示例，或者你的服务器地址
            //                     data: `https://via.placeholder.com/400x300.png/0000FF/FFFFFF?text=Server+Image+${Date.now()}`,
            //                     msg: '上传成功'
            //                 })
            //             });
            //         } else {
            //              // 模拟服务器错误
            //             resolve({
            //                  ok: true, // fetch本身可能ok，但业务逻辑失败
            //                  status: 200,
            //                  json: async () => ({ code: 0, msg: '服务器处理失败' })
            //             });
            //             // 模拟网络错误
            //             // reject(new Error('模拟网络错误'));
            //             // 模拟HTTP错误
            //             // resolve({ ok: false, status: 500 });
            //         }
            //     }, 1500); // 模拟1.5秒延迟
            // });
            // const response = await responsePromise;
            // --- 真实 Fetch 请求 ---
            const response = await fetch('/common/savefile', { // 确保这个URL是正确的
                method: 'POST',
                body: formData,
            });


            if (!response.ok) {
                // 处理 HTTP 错误 (例如 404, 500)
                throw new Error(`服务器错误! 状态码: ${response.status}`);
            }

            const result = await response.json(); // 解析 JSON 响应

            if (result.code === 1 && result.data) {
                statusDiv.textContent = `✅ 上传成功！云端版本已显示。`;
                statusDiv.className = 'success';
                serverImage.src = result.data; // 设置服务器图片 URL
                comparisonContainer.style.display = 'flex'; // 确保对比区域可见

                // 上传成功后可以考虑清除文件选择，让用户选择新文件
                photoInput.value = null;
                selectedFile = null;
                fileNameDisplay.textContent = '上传成功，可选择新文件';
                // 按钮应保持禁用，直到选择新文件

            } else {
                // 处理服务器返回的业务逻辑错误 (code !== 1 或 data 为空)
                statusDiv.textContent = `❌ 上传失败: ${result.msg || '服务器返回未知错误'}. 仅显示本地预览。`;
                statusDiv.className = 'error';
                serverImage.src = ''; // 保持服务器图片区域为空
                // 失败时，不清空文件选择，允许用户重试同一文件
                uploadButton.disabled = false; // 允许用户重试上传
            }

        } catch (error) {
            // 处理网络错误或 JSON 解析错误等
            console.error('上传过程中发生错误:', error);
            statusDiv.textContent = `❌ 上传出错: ${error.message}. 请检查网络或联系管理员。`;
            statusDiv.className = 'error';
            serverImage.src = ''; // 保持服务器图片区域为空
            // 网络等错误，允许用户重试上传
            uploadButton.disabled = false;
        } finally {
            // 无论成功失败，恢复按钮文字 (如果成功，按钮应保持禁用直到选新文件)
            if (statusDiv.classList.contains('success')) {
                uploadButton.textContent = '上传至云端';
                // 按钮已在成功逻辑中禁用
            } else {
                uploadButton.textContent = '重新上传'; // 给用户重试的提示
                // 按钮已在失败或错误逻辑中启用
            }

            // 可选：根据最终状态附加提示
            // if (statusDiv.classList.contains('success')) {
            //     statusDiv.textContent += ' 可选择新文件再次上传。';
            // } else {
            //      statusDiv.textContent += ' 你可以尝试重新上传。';
            // }
        }
    });
</script>

</body>
</html>